<template>
  <div ref="scrollRef" class="hooks-throttle" @scroll="throttle">
    <div
      ref="scrillItemRef"
      v-for="(item, index) in list"
      :key="index"
      class="hooks-throttle-item"
    >
      这是个长内容: {{ item.label }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import useThrottle from '@/hooks/useThrottle.ts'

const throttle = useThrottle(() => {
  scrillItemRef.value.forEach((item) => {
    if (
      item.offsetTop <=
      scrollRef.value.clientHeight +
        scrollRef.value.scrollTop +
        scrollRef.value.offsetTop
    ) {
      item.classList.add('hti-enter')
    } else {
      item.classList.remove('hti-enter')
    }
  })
}, 6)
onMounted(() => {
  throttle()
})
const list = ref<{ label: string }[]>([])
const scrollRef = ref()
const scrillItemRef = ref<HTMLDivElement[]>([])
list.value = new Array(100).fill(null).map(() => {
  return {
    label: Math.floor(Math.random() * Math.pow(10, 10)).toString(16),
  }
})
</script>
<style lang="scss" scoped>
.hooks-throttle {
  height: 100%;
  overflow-y: auto;
  .hooks-throttle-item {
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
    transition: transform 0.5s ease;
    transform: translateX(-200%);
    &:not(:first-of-type) {
      margin-top: 10px;
    }
    &.hti-enter {
      transform: none;
    }
  }
}
</style>
